var vm = new Vue({
    el: '#main-container',
    data: function() {
        return {
            setting: {
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey: 'parentId'//根据node节点中的parentId属性来作为pId属性值
                    }
                },
                callback:{
                    // beforeClick:this.beforeClick,
                    onClick:this.onClick

                },
                view:{
                    fontCss:this.setCss
                }
            },
            nodes: [],
            treeObj: {},
            rid:'',//角色id
            name:'',//角色名
            treeNode:{},//选中的公司节点
            yxUsers:[],//已选人员数组
            removeBtn:false,//移除人员按钮显示标记  默认不显示
            yxIds:[],//提交移除的用户id
            dxUsers:[],//待选人员数组
            addBtn:false,//添加人员按钮显示标记  默认不显示
            dxIds:[],//添加待选人员id数组
            oid:{}
        }
    },
    methods: {
        update: function () {


        },
        yxUser:function(){//根据当前角色id，查询后台，得到当前角色已经授权的用户id和name
            axios({
                url:`manager/user/selectByRid/${this.rid}`
            }).then(response=>{
                this.yxUsers=response.data.obj;
                //设置默认不选中  show用于checkbox的显示与否
                for (let i in this.yxUsers) {
                    this.yxUsers[i].show=false;
                }
            }).catch(error=>{
                layer.msg(error.message);
            })
        },
        //选中某个已选人员的checkbox触发点击事件
        /**
         * 1.将选中状态切换
         * 2.如果是选中用户将id放入移除用户列表，如果是取消选中，将用户从移除用户列表中删除
         * 3.判断是否有checkbox被选中，处理删除选中人员按钮的显示状态
         * @param id
         */
        checkYxUsers:function (id) {
            for (let i in this.yxUsers) {
                if(this.yxUsers[i].id===id){
                    this.yxUsers[i].show=!this.yxUsers[i].show;

                    if(this.yxUsers[i].show){//加入数组
                        this.yxIds.push(this.yxUsers[i].id);
                    }else{//取消选中，从数组移除
                        for (let j in this.yxIds) {
                            if(this.yxUsers[i].id===this.yxIds[j]){
                                //查找到指定索引位置元素，删除
                                this.yxIds.splice(j);
                                break;
                            }
                        }

                    }
                }
            }
            //判断是否显示移除按钮
            if(this.yxIds.length>0){
                this.removeBtn=true;
            }else{
                this.removeBtn=false;
            }
        }
        ,
        //删除已选人员
        /**
         * 1.发送请求，传递rid和yxIds删除数据
         * 2.刷新已选人员列表和隐藏移除按钮
         * 3.如果当前移除人员是选中的公司的人员，则应该刷新未选人员列表
         */
        removeYxUsers:function () {
            axios({
                url:`manager/role/deleteBatch`,
                //传递{ids:this.yxIds}  ->实际会被浏览器自动序列化成字符串放入url中 序列化的时候会把数组的参数名修改调
            //ids[]:xxx  需要自行处理序列化
                //ids:this.yxIds+''->  自动组装成  xxx?ids='1,2,3'  =>   等同于xxx?ids=1&ids=2...
                params:{rid:this.rid,ids:this.yxIds+''}
            }).then(response=>{

                if(response.data.success){
                    this.yxUser();//刷新已选列表
                    this.removeBtn=false;
                    if(this.treeNode.length>0){
                        //更新待选列表
                        this.dxUser();
                    }
                }else{
                    layer.msg(response.data.msg);
                }



            }).catch(error=>{
                layer.msg(error.message);
            })
        },
        dxUser:function () {//查询待选人员
            axios({
                url:`manager/user/selectNoRole`,
                params:{rid:this.rid,oid:this.oid}
            }).then(response=>{
                this.dxUsers=response.data.obj;
                //设置默认不选中  show用于checkbox的显示与否
                for (let i in this.dxUsers) {
                    this.dxUsers[i].show=false;
                }
            }).catch(error=>{
                layer.msg(error.message);
            })
        },
        checkDxUsers:function (id) {
            for (let i in this.dxUsers) {
                if(this.dxUsers[i].id===id){
                    this.dxUsers[i].show=!this.dxUsers[i].show;

                    if(this.dxUsers[i].show){//加入数组
                        this.dxIds.push(this.dxUsers[i].id);
                    }else{//取消选中，从数组移除
                        for (let j in this.dxIds) {
                            if(this.dxUsers[i].id===this.dxIds[j]){
                                //查找到指定索引位置元素，删除
                                this.dxIds.splice(j);
                                // break;
                            }
                        }

                    }
                }
            }
            //判断是否显示移除按钮
            if(this.dxIds.length>0){
                this.addBtn=true;
            }else{
                this.addBtn=false;
            }

        },
        /**
         * 1.发送请求，传递rid和dxIds删除数据
         * 2.刷新戴选人员列表和隐藏移除按钮
         * 3.刷新已选人员列表
         */
        addDxUsers:function () {
            axios({
                url:`manager/role/insertBatch`,
                //传递{ids:this.yxIds}  ->实际会被浏览器自动序列化成字符串放入url中 序列化的时候会把数组的参数名修改调
                //ids[]:xxx  需要自行处理序列化
                //ids:this.yxIds+''->  自动组装成  xxx?ids='1,2,3'  =>   等同于xxx?ids=1&ids=2...
                params:{rid:this.rid,cids:this.dxIds+''}
            }).then(response=>{

                if(response.data.success){
                    this.dxUser();//刷新已选列表
                    this.addBtn=false;
                    this.yxUser();

                }else{
                    layer.msg(response.data.msg);
                }



            }).catch(error=>{
                layer.msg(error.message);
            })
        }


        ,
        initTree:function(){//初始化ztree
            //获取nodes
            axios({
                url:'manager/office/list'
            }).then(response => {
                this.nodes = response.data.obj;//   this.setNodes(.....)
                this.nodes[this.nodes.length]={
                    "id": 0,
                    "name": "所有机构"
                }
                this.treeObj =   $.fn.zTree.init($("#treeOffice"),this.setting,this.nodes);


            }).catch(function (error) {
                layer.msg(error.message);
            })
        },
        onClick:function(event, treeId, treeNode){
            this.treeNode = treeNode;
            let treeNodes = this.treeObj.transformToArray(this.treeObj.getNodes());
            //清除原高亮标记
            for (let index in treeNodes) {
                if(treeNodes[index].id===treeNode.id){
                    treeNodes[index].higtLine = true;//设置高亮标记
                }else{
                    treeNodes[index].higtLine=false;
                }
                this.treeObj.updateNode(treeNodes[index]);//更新节点，自动调用清除css
            }
            if(treeNode.id!==0){
                this.oid=treeNode.id;
                this.dxUser();//查找待选人员
            }
        },
        setCss:function(treeId,treeNode){
            return treeNode.higtLine?{color:"red"}:{color:''};//根据标记显示高亮
        }

    },
    created: function () {
        this.rid=parent.layer.rid;
        this.name = parent.layer.name;
        this.yxUser();
    },
    mounted:function(){
        this.initTree();//初始化公司树

    }

});